<template>
  <!-- 角色未加载时显示加载中 -->
  <div v-if="!roleName">
    <el-loading v-loading="true" element-loading-text="加载中...">
      <div style="height: 1000px;"></div>
    </el-loading>
  </div>

  <!-- 管理员页面：显示老人信息+审批区 -->
  <div class="test-step-content" v-else-if="roleName === 'admin'">
    <div class="content-wrapper">
      <!-- 左侧信息区 -->
      <div class="left-content">
        <!-- 基本信息 -->
        <div class="module basic-info">
          <div class="title-box">
            <span class="badge" style="background-color: #f56c6c">1</span>
            <h2 class="page-title">基本信息</h2>
          </div>
          <div class="info-grid">
            <div class="grid-row">
              <div class="grid-label">老人姓名：</div>
              <div class="grid-value">{{ elder.name || "未获取" }}</div>
            </div>
            <div class="grid-row">
              <div class="grid-label">老人身份证号：</div>
              <div class="grid-value">{{ elder.idCard || "未获取" }}</div>
            </div>
            <div class="grid-row">
              <div class="grid-label">性别：</div>
              <div class="grid-value">{{ elder.gender }}</div>
            </div>
            <div class="grid-row">
              <div class="grid-label">出生日期：</div>
              <div class="grid-value">{{ elder.birthDate || "未获取" }}</div>
            </div>
            <div class="grid-row">
              <div class="grid-label">详细住址：</div>
              <div class="grid-value">{{ elder.address || "未获取" }}</div>
            </div>
          </div>
        </div>

        <!-- 健康状况 -->
        <div class="module health-status">
          <div class="title-box">
            <span class="badge" style="background-color: #f56c6c">2</span>
            <h2 class="page-title">健康状况</h2>
          </div>
          <!-- 疾病和用药情况 -->
          <div class="sub-module disease-info">
            <h4>疾病和用药情况</h4>
            <div class="grid-row">
              <div class="grid-label">疾病诊断：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  v-for="(disease, idx) in assessment.diseaseDiagnosis?.selected || []"
                  :key="idx"
                >
                  {{ disease }}
                </el-tag>
                <span class="extra-info" v-if="!assessment.diseaseDiagnosis?.selected?.length">无疾病记录</span>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">用药情况：</div>
              <div class="grid-value">
                <table class="med-table">
                  <thead>
                    <tr>
                      <th>药物名称</th>
                      <th>服药方法</th>
                      <th>用药剂量</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(med, idx) in assessment.medicationInfo?.list || []" :key="idx">
                      <td>{{ med.drugName }}</td>
                      <td>{{ med.usage }}</td>
                      <td>{{ med.dosage }}</td>
                    </tr>
                    <tr v-if="!assessment.medicationInfo?.list?.length">
                      <td colspan="3" style="text-align: center; color: #999">无用药记录</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- 近30天风险事件 -->
          <div class="sub-module risk-events">
            <h4>近30天内风险事件</h4>
            <div class="grid-row">
              <div class="grid-label">跌倒：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="assessment.riskFactors?.跌倒 === '发生过3次以上' ? 'danger' : ''"
                >
                  {{ assessment.riskFactors?.跌倒 || "未发生" }}
                </el-tag>
              </div>
              <div class="grid-label">走失：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="assessment.riskFactors?.走失 === '发生过3次以上' ? 'danger' : ''"
                >
                  {{ assessment.riskFactors?.走失 || "未发生" }}
                </el-tag>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">噎食：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="
                    assessment.riskFactors?.噎食 === '发生过3次以上' ? 'danger' : 
                    assessment.riskFactors?.噎食 === '发生过两次' ? 'warning' : ''
                  "
                >
                  {{ assessment.riskFactors?.噎食 || "未发生" }}
                </el-tag>
              </div>
              <div class="grid-label">自杀：</div>
              <div class="grid-value">
                <el-tag size="mini" class="tag-item danger" v-if="assessment.riskFactors?.自杀 === '发生过3次以上'">
                  {{ assessment.riskFactors?.自杀 || "未发生" }}
                </el-tag>
                <el-tag size="mini" class="tag-item" v-else>
                  {{ assessment.riskFactors?.自杀 || "未发生" }}
                </el-tag>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">昏迷：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="assessment.riskFactors?.昏迷 === '发生过3次以上' ? 'danger' : ''"
                >
                  {{ assessment.riskFactors?.昏迷 || "未发生" }}
                </el-tag>
              </div>
            </div>
          </div>

          <!-- 身体健康情况 -->
          <div class="sub-module body-health">
            <h4>身体健康情况</h4>
            <div class="grid-row">
              <div class="grid-label">伤口情况：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  v-for="(wound, idx) in assessment.woundCondition?.selected || []"
                  :key="idx"
                >
                  {{ wound }}
                </el-tag>
                <span class="extra-info" v-if="!assessment.woundCondition?.selected?.length">无伤口记录</span>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">特殊医疗照护情况：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  v-for="(care, idx) in assessment.specialMedicalCare?.selected || []"
                  :key="idx"
                >
                  {{ care }}
                </el-tag>
                <span class="extra-info" v-if="!assessment.specialMedicalCare?.selected?.length">无特殊照护需求</span>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">自理能力：</div>
              <div class="grid-value">
                <el-tag size="mini" class="tag-item">
                  {{ assessment.selfCareAbility?.result || "未评估" }}
                </el-tag>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">痴呆前兆：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  v-for="(symptom, idx) in assessment.dementiaPrecursors?.selected || []"
                  :key="idx"
                >
                  {{ symptom }}
                </el-tag>
                <span class="extra-info" v-if="!assessment.dementiaPrecursors?.selected?.length">无痴呆前兆</span>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">其他：</div>
              <div class="grid-value">
                {{ assessment.otherConditions?.content || "无其他信息" }}
              </div>
            </div>
          </div>

          <!-- 近期体检报告 -->
          <div class="sub-module medical-report">
            <h4>近期体检报告</h4>
            <div class="grid-row">
              <div class="grid-label">体检报告：</div>
              <div class="grid-value">
                <span>{{ assessment.medicalReport?.fileName || "健康评估报告.png" }}</span>
                <el-button type="text" size="mini" @click="viewReport" v-if="assessment.medicalReport?.url">
                  查看
                </el-button>
                <span v-else style="color: #999">无报告链接</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 能力状况 -->
        <div class="module ability-status">
          <div class="title-box">
            <span class="badge" style="background-color: #f56c6c">3</span>
            <h2 class="page-title">能力状况</h2>
          </div>
          <div class="sub-module ability-assessment">
            <h4>能力评估结果</h4>
            <div class="grid-row">
              <div class="grid-label">各指标分数(分)</div>
              <div class="grid-value">
                <span class="aa">自理能力得分: {{ abilityData.selfCareAbility?.模块总分 || 0 }}</span>
                <span class="aa">精神状态得分: {{ abilityData.mentalStatus?.模块总分 || 0 }}</span>
                <span class="aa">感知觉与社会参与得分: {{ abilityData.perceptionSocialParticipation?.模块总分 || 0 }}</span>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">评估总分(分)</div>
              <div class="grid-value">
                {{
                  (abilityData.selfCareAbility?.模块总分 || 0) +
                  (abilityData.mentalStatus?.模块总分 || 0) +
                  (abilityData.perceptionSocialParticipation?.模块总分 || 0)
                }}
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">能力初步等级</div>
              <div class="grid-value">
                {{ report.preliminaryAbilityLevel || "未评估" }}
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">能力等级变更依据</div>
              <div class="grid-value">
                <template v-if="
                  report.levelChangeBasis?.selected?.[0] ||
                  (report.otherBasis?.content && report.otherBasis.content !== '暂无')
                ">
                  <el-tag size="mini" class="tag-item" v-if="report.levelChangeBasis?.selected?.[0]">
                    {{ report.levelChangeBasis.selected[0] }}
                  </el-tag>
                  <el-tag size="mini" class="tag-item" v-if="
                    report.otherBasis?.content && report.otherBasis.content !== '暂无'
                  ">
                    其他：{{ report.otherBasis.content }}
                  </el-tag>
                </template>
                <span class="extra-info" v-else>无变更依据</span>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">能力最终等级</div>
              <div class="grid-value">
                <el-tag size="mini" class="tag-item danger">
                  {{ report.finalAbilityLevel || "未评估" }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧审批区 -->
      <div class="right-content">
        <el-card class="approval-card">
          <h3>审批结果</h3>
          <el-form
            :model="approvalForm"
            ref="approvalFormRef"
            label-width="120px"
          >
            <el-form-item
              label="审批结果"
              prop="auditStatus"
              :rules="[
                { required: true, message: '请选择审批结果', trigger: 'change' },
              ]"
            >
              <el-radio-group v-model="approvalForm.auditStatus">
                <el-radio label="通过">审批通过</el-radio>
                <el-radio label="拒绝">审批拒绝</el-radio>
                <el-radio label="驳回">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="审批意见"
              prop="opinion"
              :rules="[
                { required: true, message: '请输入审批意见', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="approvalForm.opinion"
                type="textarea"
                placeholder="请输入"
                maxlength="200"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card class="record-card">
          <h3>操作记录</h3>
          <ul class="record-list">
            <li>
              <div class="record-item">
                <div class="record-icon"></div>
                <div class="record-content">
                  <p>评估中-健康信息录入</p>
                  <p>{{ lastName }} (已完成)</p>
                </div>
                <div class="record-time">{{ lastTime }}</div>
              </div>
            </li>
            <li>
              <div class="record-item">
                <div class="record-icon"></div>
                <div class="record-content">
                  <p>审批-入住审批</p>
                  <p>{{ userStore.nickName }} (审批中)</p>
                </div>
                <div class="record-time">{{ currentTime }}</div>
              </div>
            </li>
          </ul>
        </el-card>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="btn-group">
      <el-button @click="handleGoBack" size="default" plain class="mr-3">返回</el-button>
      <el-button type="primary" @click="handleSubmit" size="default">提交</el-button>
    </div>
  </div>

  <!-- 护理员页面：显示审批状态提示 -->
  <div class="common-step4" v-else-if="roleName === 'huliyuanA'">
    <!-- 步骤条区域（护理员隐藏） -->
    <div class="step-container" v-if="showSteps">
      <el-steps
        style="width: 100%"
        align-center
        :active="3"
        finish-status="success"
        process-status="process"
        @step-click="handleStepClick"
      >
        <el-step title="申请入住" :status="getStepStatus(0)" />
        <el-step title="入住评估" :status="getStepStatus(1)" />
        <el-step title="入住审批" :status="getStepStatus(2)" />
        <el-step title="入住配置" :status="getStepStatus(3)" />
        <el-step title="签约办理" :status="getStepStatus(4)" />
      </el-steps>
    </div>

    <!-- 状态提示区域（使用指定图片路径） -->
    <div class="approval-status">
      <div class="status-icon">
        <img src="/src/assets/images/注意1.png" alt="审批中图标" />
      </div>
      <div class="status-text">
        <p class="status-title">审批中</p>
        <p class="status-desc">
          稍等，入住申请单正在审批中，若该申请单长时间未处理，请联系（审批角色）！
        </p>
      </div>
    </div>

    <!-- 操作记录区域 -->
    <div class="operation-record">
      <div class="record-wrapper">
        <h3 class="record-title">操作记录</h3>
        <div class="record-content-center">
          <ul class="record-list">
            <li>
              <p class="record-action">发起申请-申请入住</p>
              <div class="record-meta">
                <p class="record-operator">{{lastName}}</p>
                <p class="record-time">{{lastTime}}</p>
              </div>
            </li>
            <li>
              <p class="record-action">审批-申请审批</p>
              <div class="record-meta">
                <p class="record-operator">{{lastName}}（审批中）</p>
                <p class="record-time"></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 返回按钮 -->
    <div class="btn-area">
      <el-button type="default" @click="handleBack">返回</el-button>
    </div>
  </div>

  <!-- 其他角色：无权限提示 -->
  <div v-else class="no-permission">
    <div style="text-align: center; padding: 100px 20px;">
      <div style="font-size: 60px; color: #909399; margin-bottom: 20px;">🔒</div>
      <h3 style="color: #606266; margin-bottom: 10px;">无权限访问</h3>
      <p style="color: #909399;">当前角色未配置访问权限，请联系管理员</p>
      <el-button type="default" @click="handleBack" style="margin-top: 20px;">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getElderly1 } from "@/api/system/elderly";
import { getAssessment } from "@/api/healthassess/assessment";
import { getReport } from "@/api/assessreport/report";
import { getAbility } from "@/api/abilityassess/ability";
import { updateAccraditationrecord, getUniqueRecord } from "@/api/accraditationrecord/accraditationrecord";
import useUserStore from "@/store/modules/user";
import { getUser } from "@/api/system/user";
import { useRouter, useRoute } from "vue-router";

// 路由与用户状态
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
console.log("当前登录用户信息：", {
  id: userStore.id,
  name: userStore.name,
  nickName: userStore.nickName,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions,
});
const roleName = userStore.name; // 存储当前用户角色

// 接收参数（兼容两个页面的参数需求）
const props = defineProps({
  stepNum: { type: Number, default: 2 }, // 管理员页面用
  elderlyId: { type: Number, default: null }, // 管理员页面用
});

// 数据存储
const elder = ref({});
const assessment = ref({});
const report = ref({});
const abilityData = ref({
  selfCareAbility: { 得分明细: {}, 模块总分: 0, 评估结果: {} },
  mentalStatus: { 得分明细: {}, 模块总分: 0, 评估结果: {} },
  perceptionSocialParticipation: { 得分明细: {}, 模块总分: 0, 评估结果: {} },
});
const lastTime = ref("");
const lastName = ref("");
const currentTime = ref('');
let timer = null;
const showSteps = ref(false); // 护理员默认隐藏步骤条

// 审批表单（仅管理员用）
const approvalForm = ref({
  auditStatus: "",
  opinion: ""
});
const approvalFormRef = ref(null);

// 格式化时间
const formatTime = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 步骤状态逻辑（仅管理员用）
const getStepStatus = (stepIndex) => {
  const currentStep = 2;
  if (stepIndex < currentStep) return "success";
  else if (stepIndex === currentStep) return "process";
  else return "wait";
};

// 接口请求函数
const queryElderlyInfo = async (id) => {
  try {
    const res = await getElderly1(id);
    elder.value = res.data || {};
  } catch (error) {
    console.error("老人信息查询失败：", error);
  }
};

const queryHealthAssessment = async (id) => {
  try {
    const res = await getAssessment(id);
    const parsedData = {
      ...res.data,
      dementiaPrecursors: JSON.parse(res.data?.dementiaPrecursors || "{}"),
      diseaseDiagnosis: JSON.parse(res.data?.diseaseDiagnosis || "{}"),
      medicalReport: JSON.parse(res.data?.medicalReport || "{}"),
      medicationInfo: JSON.parse(res.data?.medicationInfo || "{}"),
      otherConditions: JSON.parse(res.data?.otherConditions || "{}"),
      riskFactors: JSON.parse(res.data?.riskFactors || "{}"),
      selfCareAbility: JSON.parse(res.data?.selfCareAbility || "{}"),
      specialMedicalCare: JSON.parse(res.data?.specialMedicalCare || "{}"),
      woundCondition: JSON.parse(res.data?.woundCondition || "{}"),
    };
    assessment.value = parsedData;
  } catch (error) {
    console.error("健康评估查询失败：", error);
  }
};

const queryAssessReport = async (id) => {
  try {
    const res = await getReport(id);
    lastTime.value = res.data?.createTime || "无";
    const userId = res.data?.creator || "";
    if (userId) {
      const userRes = await getUser(userId);
      lastName.value = userRes.data?.nickName || "无";
    }

    let levelChangeBasis = { selected: [] };
    if (res.data?.levelChangeBasis) {
      try { levelChangeBasis = JSON.parse(res.data.levelChangeBasis); } 
      catch (e) { console.error("levelChangeBasis解析失败：", e); }
    }

    let otherBasis = { content: "暂无" };
    if (res.data?.otherBasis) {
      try { otherBasis = JSON.parse(res.data.otherBasis); } 
      catch (e) { console.error("otherBasis解析失败：", e); }
    }

    report.value = { ...res.data, levelChangeBasis, otherBasis };
  } catch (error) {
    console.error("评估报告查询失败：", error);
  }
};

const queryAbilityAssessment = async (id) => {
  try {
    const res = await getAbility(id);
    const defaultSelfCare = '{"得分明细":{"eat":0,"bath":0,"groom":0},"模块总分":0,"评估结果":{}}';
    const defaultMental = '{"得分明细":{"memory":0,"judgment":0,"moodStability":0},"模块总分":0,"评估结果":{}}';
    const defaultPerception = '{"得分明细":{"sense":0,"communication":0,"socialParticipation":0},"模块总分":0,"评估结果":{}}';

    abilityData.value = {
      ...res.data,
      selfCareAbility: JSON.parse(res.data?.selfCareAbility || defaultSelfCare),
      mentalStatus: JSON.parse(res.data?.mentalStatus || defaultMental),
      perceptionSocialParticipation: JSON.parse(res.data?.perceptionSocialParticipation || defaultPerception),
    };
  } catch (error) {
    console.error("能力评估查询失败：", error);
  }
};

// 审批逻辑（仅管理员用）
const queryInfo = async () => {
  try {
    const id = props.elderlyId || route.query.id;
    if (!id) return;
    const recordResponse = await getUniqueRecord({ 
      stepNo: 2, 
      checkContentId: id 
    });
    const recordData = recordResponse.data || {};
    if (!recordData.id) return;

    const updateData = {
      id: recordData.id,
      auditStatus: approvalForm.value.auditStatus,
      opinion: approvalForm.value.opinion,
      stepNo: 4,
      finishTime: currentTime.value,
      currentStep:"入住配置",
      nextStep:"签约办理",
      handleType: approvalForm.value.auditStatus === "通过" ? "已审批" : "已拒绝",
    };
    await updateAccraditationrecord(updateData);
  } catch (error) {
    console.error("审批记录更新失败：", error);
  }
};

// 事件处理
const emit = defineEmits(["goBack", "submitSuccess"]);
const handleGoBack = () => emit("goBack");
const handleBack = () => router.back();
const handleStepClick = (step) => console.log("点击步骤索引：", step.index);

const handleSubmit = async () => {
  const isValid = await approvalFormRef.value.validate();
  if (!isValid) return;

  await queryInfo();
  if (approvalForm.value.auditStatus === "拒绝" || approvalForm.value.auditStatus === "驳回") {
    router.push("/togetherwork/togetherwork1/myapply");
    ElMessage.warning("审批已" + approvalForm.value.auditStatus);
  } else {
    ElMessage.success(`步骤${props.stepNum}提交成功！`);
    emit("submitSuccess");
  }
};

const viewReport = () => {
  if (assessment.value.medicalReport?.url) {
    window.open(assessment.value.medicalReport.url, "_blank");
  } else {
    ElMessageBox.alert("无有效报告链接", "提示", { confirmButtonText: "确定" });
  }
};

// 组件生命周期
onMounted(() => {
  console.log(userStore);
  // 管理员显示步骤条
 if (roleName.value === 'admin') showSteps.value = true;


  // 2. 加载数据
  const dataId = props.elderlyId || route.query.id;
  if (dataId) {
    queryElderlyInfo(dataId);
    queryHealthAssessment(dataId);
    queryAssessReport(dataId);
    queryAbilityAssessment(dataId);
  }

  // 3. 时间更新
  currentTime.value = formatTime(new Date());
  timer = setInterval(() => {
    currentTime.value = formatTime(new Date());
  }, 1000);
});

onUnmounted(() => {
  if (timer) clearInterval(timer);
});
</script>

<style scoped>
/* 管理员页面样式 */
.test-step-content {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 20px;
}

.content-wrapper {
  display: flex;
  gap: 30px;
  margin-bottom: 80px;
}

.left-content {
  flex: 1;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.module {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.title-box {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  margin-right: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid-row {
  display: flex;
  align-items: center;
  margin: 8px 0;
  flex-wrap: wrap;
}

.grid-label {
  width: 160px;
  text-align: right;
  margin-right: 12px;
  color: #666;
}

.grid-value {
  color: #333;
  flex: 1;
  line-height: 1.5;
}

.sub-module {
  margin-bottom: 24px;
}

.sub-module h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  border-left: 3px solid #67c23a;
  padding-left: 6px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px 4px;
  padding: 4px 8px;
  border: 1px solid #409eff;
  border-radius: 4px;
  background: #fff;
  color: #409eff;
}

.tag-item.warning {
  border-color: #e6a23c;
  color: #e6a23c;
}

.tag-item.danger {
  border-color: #f56c6c;
  color: #f56c6c;
}

.extra-info {
  color: #999;
  margin-left: 8px;
}

.med-table {
  width: 100%;
  max-width: 500px;
  border-collapse: collapse;
  margin-top: 4px;
}

.med-table th,
.med-table td {
  border: 1px solid #ebeef5;
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
}

.med-table thead {
  background: #f8f9fa;
}

.right-content {
  width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.approval-card,
.record-card {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.record-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.record-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #409eff;
  margin: 4px 8px 0 0;
}

.record-content {
  width: 300px;
  margin: 0 12px;
  color: #333;
}

.record-content p {
  margin-top: -4px;
}

.record-time {
  width: 220px;
  text-align: right;
  color: #999;
  font-size: 13px;
}

.btn-group {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.mr-3 {
  margin-right: 12px;
}

.aa {
  margin-right: 110px;
}

/* 护理员页面样式 */
.common-step4 {
  padding: 20px 0;
  background: #fff;
  border-radius: 8px;
  margin: 0 auto;
}

.approval-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  text-align: center;
}

.status-icon {
  margin: 0 auto 20px;
}

.status-icon img {
  width: 50px;
  height: 50px;
}

.status-text .status-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  word-wrap: break-word;
}

.status-text .status-desc {
  color: #666;
  max-width: 600px;
  word-wrap: break-word;
}

.operation-record {
  margin-bottom: 30px;
  align-items: center;
}

.record-wrapper {
  background: #f5f7fa;
  border-radius: 8px;
  max-width: 600px;
  padding: 20px;
  margin: 0 auto;
}

.record-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 20px 0;
  text-align: left;
}

.record-content-center {
  display: flex;
  justify-content: center;
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 500px;
}

.record-list li {
  margin-bottom: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.record-operator,
.record-time {
  margin: 0;
  white-space: nowrap;
}

.record-operator {
  color: #666;
  font-size: 13px;
}

.record-time {
  color: #999;
  font-size: 12px;
}

.record-action {
  font-weight: 500;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.step-container {
  margin: 20px 0;
}

.btn-area {
  text-align: center;
}

:deep(.el-step__title.is-process) {
  font-weight: bold;
}

/* 无权限页面样式 */
.no-permission {
  min-height: 500px;
  background: #fff;
  border-radius: 8px;
  margin: 20px;
}
</style>